<!DoCtYpE hTmL>
<html>
<head>
<title>Chrowety Geo Location</title>
<link rel="stylesheet" href="css/base.css" />
<style>body{margin:0;text-align:center;padding:0;font-family:Tahoma,Arial;font-size:10pt}</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
var Controller = function(){if(chrome.extension.getBackgroundPage()){return chrome.extension.getBackgroundPage();}else{var v=chrome.extension.getViews(),p;for(var i in v){if(v[i]&&v[i].fec){p=v[i]}}return p;}};
var db = Controller().db;
function Traduz(s,e){return Controller().Traduz(s, e)}
function html(r){return document.write(r)}

var map,Icone,info,isConfigured;
var Location = null;
var geocoder = new google.maps.Geocoder();

function Salva(){
    if(!window.opener)
    {
        alert('A error found when tried to connect to the Chrowety Options.');
    }else
    {
        window.opener.SalvaLocation();
    }
}

function Ponto(op){
    var pos = Icone.getPosition();
    if(op) info.open(map, Icone);
    Position(pos);
}

function Position(pos){
  geocoder.geocode({
    latLng: pos
  },function(responses) {
    if(responses && responses.length > 0) {
      document.getElementById('endereco').innerText = (responses[0].formatted_address);
    }else{
      //console.log('Cannot determine address at this location.');
    }
  });
}

function ShowMap() {
    var _ll;
    if(Controller().config.Geo.Location && Controller().config.Geo.Location[0]){
        isConfigured = true;
        _ll = Controller().config.Geo.Location;
    }else{
        isConfigured = false;
        _ll = [-26.489323960057277, -44.56107812499999];
    }
    var Coo = new google.maps.LatLng(_ll[0], _ll[1]);
    var Op = {
        zoom: (isConfigured ? 15 : 2),
        center: Coo,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("mapa"), Op);
    var html =
    '<div style="text-align:left;font-family:Tahoma,Arial;font-size:8pt;clear:both">'+
        '<span style="height:32px;line-height:32px;vertical-align:middle">'+
            '<img style="float:left;margin-right:5px;border-radius:4px" width="32" height="32" src="{foto}">'+
            '{texto}'+
        '</span>'+
        ''+
    '</div>';
    html = html.replace('{foto}', db.pega('foto'));
    html = html.replace('{texto}', Traduz('where_are_you', db.pega('nome').split(' ')[0]));
    info = new google.maps.InfoWindow({
        position: Coo,
        content: html
    });
    Icone = new google.maps.Marker({
        position: Coo,
        size: new google.maps.Size(37, 32),
        map: map,
        title: Traduz('where_are_you', db.pega('nome').split(' ')[0]),
        draggable: true,
        cursor: 'move',
        icon: chrome.extension.getURL('icones/x19.png')
    });
    google.maps.event.addListener(Icone, 'dragstart', function(){info.close()});
    google.maps.event.addListener(Icone, 'drag', function(){Ponto()});
    google.maps.event.addListener(Icone, 'dragend', function(){Ponto(true)});
    Ponto(true);

    if (navigator.geolocation && !isConfigured)
    {
        document.getElementById('status').innerText = 'Getting your location...';
        navigator.geolocation.getCurrentPosition(function(pos){
            var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            map.setCenter(latlng);
            map.setZoom(15);
            Icone.setPosition(latlng);
            Ponto();
            document.getElementById('status').innerText = 'Found!';
        });
    }
}
</script>
</head>
<body onload="ShowMap()">
  <div id="mapa" style="width:400px; height:300px">
    <span>
      <img style="float:left;margin-right:5px;" src="img/load.gif" />
      <script>html(Traduz('loading'))</script>
    </span>
  </div>
  <br />
  <span id="endereco"></span>
  <br /><br />
  <button onclick="Salva()" class="buttonn"><script>html(Traduz('done'))</script></button>
  <br />
  <span style="float:left" id="status"></span>
</body>
</html>